<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <ul>
      <li>list item1</li>
      <li>list item2</li>
      <li class="third-item">list item3</li>
      <li>list item4</li>
      <li>list item5</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(function () {
        $('li.third-item').nextAll().addSelf().css('background-color', 'red')
        /*
        解释说明：
        1、首先，初始的选择器会定义项目3，初始化的堆栈存有仅包含该项目的集合；
        2、调用 .nextAll() 会将 项目4,5 的集合 推入堆栈；
        3、最后，调用 .addSelf() 会合并这2个集合，所创建的 jq对象 指向按照文档顺序的所有3个项目：{[<li.third-item>, <li>, <li>]}
        */
      })
    </script>
  </body>
</html>
